<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			body{
				background-color: pink; 
			}
			@media  only screen and (max-width:480px) {
				body{
					background-color: red;
					color: white;
				}
				
			}
			@media all and (orientation:landscape) {
				body{
					background-color: orange;
				}
			}
		</style>
	</head>
	<body>
		<h1>如果屏幕类型视口小于480px，背景颜色为红色，字体为白色</h1>
	</body>
</html>
